<template>
  <div>
    <v-header></v-header>

    <div class="swiper-wrapper">
      <v-swiper :data="swiperData"></v-swiper>
      <ul class="menus">
        <li v-for="(item, index) in menuData" :key="index">
          <a :href="item.href">
            {{item.name}}
          </a>
        </li>
      </ul>
    </div>

    <ul class="post-wrapper clearfix">
      <li v-for="(item, index) in postData" :key="index">
        <a :href="item.href">
          <img :src="item.imgUrl" alt="">
        </a>
      </li>
    </ul>

    <div class="index-container">
      <div class="sale">
        <h3 class="title">热卖商品</h3>
        <v-goods-list :data="hotSaleData"></v-goods-list>
      </div>
      <div class="sale">
        <h3 class="title">手机</h3>
        <v-ad-list :data="phoneAdData"></v-ad-list>
        <v-goods-list :data="phoneSaleData"></v-goods-list>
        <ul>
          <li></li>
        </ul>
      </div>
      <div class="sale">
        <h3 class="title">智能配件</h3>
        <v-ad-list :data="smartAdData"></v-ad-list>
        <v-goods-list :data="smartSaleData"></v-goods-list>
        <ul>
          <li></li>
        </ul>
      </div>
    </div>

    <v-footer></v-footer>
  </div>
</template>

<script type="text/javascript">
  import vHeader from '../components/header'
  import vFooter from '../components/footer'
  import vSwiper from '../components/swiper'
  import vGoodsList from '../components/goodsList'
  import vAdList from '../components/adList'

  export default {
    data () {
      return {
        swiperData: [],
        menuData: [],
        postData: [],
        hotSaleData: [],
        phoneSaleData: [],
        smartSaleData: [],
        phoneAdData: [],
        smartAdData: []
      }
    },
    mounted () {
      this.getSwiperData()
      this.getMenuData()
      this.getPostData()
      this.getHotSaleData()
      this.getPhoneSaleData()
      this.getSmartSaleData()
      this.getPhoneAdData()
      this.getSmartAdData()
    },
    methods: {
      async getSwiperData () {
        const {data} = await this.axios.get('/api/advertise')
        this.swiperData = data
      },
      async getMenuData () {
        const {data} = await this.axios.get('/api/menu')
        this.menuData = data
      },
      async getPostData () {
        const {data} = await this.axios.get('/api/post')
        this.postData = data
      },
      async getHotSaleData () {
        const {data} = await this.axios.get('/api/hotSale')
        this.hotSaleData = data
      },
      async getPhoneSaleData () {
        const {data} = await this.axios.get('/api/phoneSale')
        this.phoneSaleData = data
      },
      async getSmartSaleData () {
        const {data} = await this.axios.get('/api/smartSale')
        this.smartSaleData = data
      },
      async getPhoneAdData () {
        const {data} = await this.axios.get('/api/phoneRecommend')
        this.phoneAdData = data
      },
      async getSmartAdData () {
        const {data} = await this.axios.get('/api/smartRecommend')
        this.smartAdData = data
      }
    },
    components: {
      vHeader,
      vFooter,
      vSwiper,
      vGoodsList,
      vAdList
    }
  }
</script>

<style lang="less" scoped>
  .swiper-wrapper {
    width: 1240px;
    height: 500px;
    position: relative;
    margin: 0 auto;

    .menus {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 303px;
      background-color: rgba(0, 0, 0, .5);
      padding-top: 17px;

      li {
        height: 57px;
        line-height: 57px;
      }

      a {
        font-size: 16px;
        padding-left: 40px;
        color: #fff;
        transition: color .3s;

        &:hover {
          color: #31a5e7;
        }
      }
    }
  }

  .post-wrapper {
    width: 1240px;
    margin: 10px auto 50px;

    li {
      float: left;
      width: 303px;
      height: 180px;
      margin-right: 9px;

      a {
        transition: opacity .3s ease-in-out;

        &:hover {
          opacity: .8;
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .index-container {
    width: 1240px;
    margin: 0 auto;

    .titile {
      font-size: 30px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    .sale {
      margin-bottom: 50px;
    }
  }
</style>
